<template>
  <div class="fileDetails bgImg">
    <div class="body">
      <div class="wenzi">
         <h2>快看看你都发现了什么宝贝❤</h2>
      </div>

      <div class="bodyBg">
        <div>
          <div class="wuwenzhang" v-if="flag==1">这部分还没有相关的文章哦，快去发现其他的吧</div>
          <div v-for="bqItem in bqList" :key="bqItem.data_id" class="biaoqian-dv">
            <!-- 图片部分 -->
            <img :src="bqItem.img" alt="" class="biqian-img biaoqianI" @click="goDetails(bqItem)">
            <!-- 标题部分 -->
            <h3 class="biaoqian-title biaoqianH"  @click="goDetails(bqItem)">{{bqItem.title}}</h3>
            <!-- 时间部分 -->
            <div class="biaoqian-date">
              <i class="iconfont icon-shijian icon-time"></i>
              <span>{{bqItem.data_time}}</span>
            </div>
            <!-- 描述部分 -->
            <div class="biaoqian-describe">{{bqItem.describes}}</div>
            <!-- 菜单部分 -->
            <div class="biaoqian-caidan"  @click="goDetails(bqItem)">
              <i class="iconfont icon-caidan rt-caidan biaoqianH"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
export default {
data(){
  return {
    bqList:[],
    flag:0,
  }
},
mounted(){

  this.getktDetails()
  // this.getctDetails()
},
methods:{
  async getktDetails(){
    // console.log("这里是标签详情页");
    // var id = this.$route.query.ktId
    // var stName = this.$route.query.stName
    // var ctName = this.$route.query.ctName
    var variate = "";
    var res = {};
    if(this.$route.query.ktId != undefined){
      // console.log("这是通过label点击标签获取的id");
      variate = this.$route.query.ktId
      // console.log(variate);
      res = await this.$http.post("getktDetails",{variate});
    }else if(this.$route.query.stName != undefined){
      // console.log("这是通过点击首页的sort标签获取的stName");
      variate = this.$route.query.stName;
      // console.log(variate);
      res = await this.$http.post("getstName",{variate});
    }else if(this.$route.query.ctName != undefined){
      // console.log("这里是通过点击首页的contentSort标签获取的ctName");
      variate = this.$route.query.ctName
      // console.log(variate);
      res = await this.$http.post("getctName",{variate});
    }
    console.log(res);
    if(res.data.status != 200){
      this.$message.error('获取数据失败');
    }else{
      this.bqList = res.data.message;
      // console.log("这里是list");
      console.log(this.bqList);
      if(this.bqList.length==0){
        this.flag =!this.flag
      }
    }

  },
    async goDetails(item){
      console.log(item);
      let id = item.data_id;
      let readAmount = item.readAmount;
      const {data:res} = await this.$http.post("adddDetailCount",{id,readAmount})
      console.log(res);
      if(res.status != 200){
        this.$message.error('操作失败');
      }else{
        this.$router.push({path:'/details',query:{id:id}})
      }
    // this.$router.push({path:"/details",query:{id:id}})
  },
}
}
</script>
<style scoped>

.wuwenzhang {
  padding: 20px;
  text-align: center;
}
.biaoqian-dv {
  width: 900px;
  height: 200px;
  margin: 20px auto;
  position: relative;
  border-bottom: 1px solid #f5f7fa;
}
.biqian-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 1px;
  border: 1px solid rgba(0,0,0,.2);
  position: absolute;
  top: 50px;
  left: 20px;
  cursor: pointer;
}
.biqian-img:hover {
  border: 1px solid orange;
}
.biaoqian-title {
  position: absolute;
  top: 30px;
  left: 200px;
  cursor: pointer;
}
.biaoqian-date {
  position: absolute;
  top: 55px;
  right: 20px;
}
.biaoqian-describe {
  position: absolute;
  top: 100px;
  left: 200px;
}
.biaoqian-caidan {
  position: absolute;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
}
.rt-caidan {
  font-size: 30px;
}
.biaoqianH:hover {
  color: orange;
}
</style>
